<template>
    <div>
        <el-card class="box-card">
            <!-- 头部区域 -->
            <template #header>
                <div class="header">
                    <span>课程分配信息</span>
                </div>
            </template>
            <!-- 搜索表单 -->
            <el-form :inline="true" class="demo-form-inline">

                <el-form-item label="课程:" style="margin-right: 20px;">
                    <el-select v-model="shareSearch.courseid" placeholder="请选择课程">
                        <el-option v-for="c in course" :key="c.id" :label="c.courseName" :value="c.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="班级:">
                    <el-select v-model="shareSearch.classid" placeholder="请选择班级">
                        <el-option v-for="l in lesson" :key="l.classid" :label="l.classname"
                            :value="l.classid"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="教师:">
                    <el-select v-model="shareSearch.teaid" placeholder="请选择老师">
                        <el-option v-for="t in teacher" :key="t.teaid" :label="t.name" :value="t.teaid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="getShareInfo">查询</el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <!--表格  -->
            <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
                <el-table-column prop="id" label="ID" width="180">
                </el-table-column>
                <el-table-column prop="courseName" label="课程名称" width="180">
                </el-table-column>
                <el-table-column prop="name" label="教师姓名">
                </el-table-column>
                <el-table-column prop="classname" label="班级">
                </el-table-column>
                <el-table-column prop="startTime" label="课程开始时间">
                </el-table-column>
                <el-table-column prop="endTime" label="课程结束时间">
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button slot="reference" type="danger" icon="el-icon-delete" size="small" circle
                            @click="handleDelete(scope.row.id)"></el-button>
                    </template>

                </el-table-column>
                <template #empty>
                    <el-empty description="没有数据" />
                </template>
            </el-table>
            <!-- 分页条 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="this.pageNum" :page-sizes="[2, 3, 5, 10]" :page-size=this.pageSize
                    layout="total, sizes, prev, pager, next, jumper" :total=this.total>
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import request from '@/utils/request'
export default {
    data() {
        return {
            //搜索数据模型
            shareSearch: {
                courseid: '',
                classid: '',
                teaid: ''
            },
            //课程数据模型
            course: {
                id: '',
                courseName: ''
            },
            //教师数据模型
            teacher: {
                teaid: '',
                name: ''
            },
            //班级数据模型
            lesson: {
                classid: '',
                classname: ''
            },
            //分配课程数据模型
            pageNum: 1,
            pageSize: 2,
            total: 10,

            tableData: [{
                id: '',
                courseid: '',
                teaid: '',
                classid: '',
                courseName: '',
                endTime: '',
                name: '',
                phone: '',
                classname: ''
            }]
        }
    },

    methods: {
        //获取课程信息
        getCourseInfo() {
            request.get("/course/find").then(res => {
                if (res.data.code == '0') {
                    console.log(res.data.data)
                    this.course = res.data.data
                } else {
                    this.$message.error("获取课程信息失败")
                }
            })
        },
        //获取教师信息
        getTeaInfo() {
            request.get("/tea/find").then(res => {
                if (res.data.code == '0') {
                    this.teacher = res.data.data
                } else {
                    this.$message.error("获取教师信息失败")
                }
            })
        },
        //获取班级信息
        getClassInfo() {
            request.get("/class/find").then(res => {
                if (res.data.code == '0') {
                    this.lesson = res.data.data
                } else {
                    this.$message.error("获取班级信息失败")
                }
            })
        },
        //获取课程分配信息
        getShareInfo() {
            request.get("/share/findAll", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    courseid: this.shareSearch.courseid,
                    classid: this.shareSearch.classid,
                    teaid: this.shareSearch.teaid

                }
            }).then(res => {
                if (res.data.code == '0') {
                    this.$message.success("成功获取课程分配信息")
                    this.tableData = res.data.data.list
                    this.total = res.data.data.total
                } else {
                    this.$message.error("获取失败")
                }
            })
        },
        //变色
        tableRowClassName({ rowIndex }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        //分页方法
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.getShareInfo()
        },

        handleCurrentChange(pageNum) {
            this.pageNum = pageNum
            this.getShareInfo()

        },
        //搜索重置
        reset() {
                this.shareSearch.courseid = '',
                this.shareSearch.classid = '',
                this.shareSearch.teaid = ''
        },
        //删除
        handleDelete(id) {


            this.$confirm('是否删除此课程分配?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                request.delete("/share/delete", {
                params: {
                    id: id
                }
            }).then(res => {
                if (res.data.code == '0') {
                    this.$message.success("删除成功")
                    this.getShareInfo()
                } else {
                    this.$message.error("删除失败")
                }
            })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        }
    },
    created() {
        this.getClassInfo()
        this.getCourseInfo()
        this.getTeaInfo()
        this.getShareInfo()
        console.log(this.course)
        console.log(this.lesson)
        console.log(this.teacher)
        console.log(this.tableData)
    }


}
</script>

<style  lang="less" scoped >
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text {
  font-size: 20px;
}

.item {
  padding: 18px 0;
}
/* <!-- 学生信息列表 --> */
.el-table .warning-row {
  background: rgb(141, 172, 187);
}


.el-table .success-row {
  background: #9bb090;
}

</style>